<template>
    <div class=''>
        <div style="width: 40%;margin-bottom: 10px;"><Input search enter-button placeholder="请输入名称" size="small" clearable @on-clear="clear" @on-search="search" /></div>
        <div>
            <Row :gutter="15">
                <template v-for="(item,index) in list">
                    <i-col span="6" :key="index">
                        <Card>
                            <div style="text-align:center;">
                                <div class="listimg"><img :src="item.url"></div>
                                <h4 class="item-title" :title="item.filename">{{item.filename}}</h4>
                                <Row type="flex" justify="space-around">
                                    <i-col span="12">
                                        <Button type="info" size="small" @click="view(item.url)">预览</Button>
                                    </i-col>
                                    <i-col span="12">
                                        <Button type="warning" size="small" @click="select(item.url)">选择</Button>
                                    </i-col>
                                </Row>
                            </div>
                        </Card>
                    </i-col>
                </template>
            </Row>
            <div style="text-align: center;margin-top: 15px;">
                <Page :total="count" show-elevator show-total :page-size="8" @on-change="changepage" />
            </div>
        </div>
        <Modal title="图片预览" v-model="visible" draggable footer-hide>
            <img :src="imageurl" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
import { service } from "../../utils/service.js"
export default {
    components: {},
    props:{name:String},
    data() {
        //这里存放数据
        return {
            page: 1,
            flag: '', //搜索关键字
            tabname: '',
            list: [],
            count: 0,
            visible: false,
            imageurl: ''
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {

    },
    //方法集合,
    methods: {
        //查询数据
        getinfo() {
            var that = this

            that.$http.post(service.attachment, { page: that.page, limit: 8, keyword: that.flag })
                .then(function(response) {
                    if (response.data.code) {
                        that.list = response.data.data.list
                    } else {
                        that.list = []
                        that.$Message.error(response.data.msg);
                    }

                    that.count = response.data.data.total
                })
                .catch(function() {
                    that.$Message.error('网络错误');
                });
        },
        //换页
        changepage(val) {
            this.page = val
            this.getinfo()
        },
        //搜索
        search(val) {
            this.page = 1
            this.flag = val
            this.getinfo()
        },
        clear() {
            this.page = 1
            this.flag = ''
            this.getinfo()
        },
        //预览
        view(url) {
            this.visible = true
            this.imageurl = url
        },
        //选中返回
        select(value) {
            this.$emit("backAdd", this.name, value)
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getinfo()
    }
}
</script>
<style lang='less' scoped>
.listimg {
    width: 100%;
    height: 130px;
    overflow: hidden;
    ;

    img {
        width: 100%;
    }
}

.item-title {
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}
</style>